<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>会议室预定系统 - 用户预定</title>
    <link href="https://unpkg.com/ant-design-vue@4.x/dist/reset.css" rel="stylesheet">
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Microsoft YaHei', sans-serif;
            background: #f0f2f5;
        }
        
        /* 顶部导航栏 */
        .header {
            background: white;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
            padding: 0 24px;
            height: 64px;
            display: flex;
            align-items: center;
            justify-content: space-between;
        }
        
        .header-title {
            display: flex;
            align-items: center;
            gap: 12px;
        }
        
        .header-title h1 {
            font-size: 20px;
            color: #262626;
            margin: 0;
        }
        
        .user-info {
            display: flex;
            align-items: center;
            gap: 16px;
        }
        
        .btn-link {
            color: #1890ff;
            border: none;
            background: none;
            cursor: pointer;
            font-size: 14px;
        }
        
        .btn-link:hover {
            color: #40a9ff;
        }
        
        /* 主内容区 */
        .main-container {
            max-width: 1400px;
            margin: 24px auto;
            padding: 0 24px;
        }
        
        .content-grid {
            display: grid;
            grid-template-columns: 400px 1fr;
            gap: 24px;
        }
        
        /* 预定表单卡片 */
        .booking-card {
            background: white;
            border-radius: 8px;
            padding: 24px;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
        }
        
        .card-title {
            font-size: 18px;
            font-weight: 600;
            color: #262626;
            margin-bottom: 20px;
        }
        
        .form-group {
            margin-bottom: 20px;
        }
        
        .form-label {
            display: block;
            color: #262626;
            font-weight: 500;
            margin-bottom: 8px;
            font-size: 14px;
        }
        
        .form-label .required {
            color: #ff4d4f;
            margin-right: 4px;
        }
        
        .form-input, .form-select, .form-textarea {
            width: 100%;
            padding: 8px 12px;
            border: 1px solid #d9d9d9;
            border-radius: 6px;
            font-size: 14px;
            transition: all 0.3s;
        }
        
        .form-input:focus, .form-select:focus, .form-textarea:focus {
            outline: none;
            border-color: #40a9ff;
            box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.1);
        }
        
        .form-textarea {
            min-height: 80px;
            resize: vertical;
        }
        
        .time-group {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 12px;
        }
        
        .btn {
            padding: 10px 20px;
            border: none;
            border-radius: 6px;
            font-size: 14px;
            font-weight: 500;
            cursor: pointer;
            transition: all 0.3s;
        }
        
        .btn-primary {
            background: #1890ff;
            color: white;
            width: 100%;
        }
        
        .btn-primary:hover {
            background: #40a9ff;
        }
        
        .btn-primary:active {
            background: #096dd9;
        }
        
        .alert {
            padding: 12px 16px;
            border-radius: 6px;
            margin-bottom: 20px;
            font-size: 14px;
        }
        
        .alert-error {
            background: #fff2f0;
            border: 1px solid #ffccc7;
            color: #cf1322;
        }
        
        .alert-success {
            background: #f6ffed;
            border: 1px solid #b7eb8f;
            color: #389e0d;
        }
        
        /* 预定列表 */
        .bookings-list {
            background: white;
            border-radius: 8px;
            padding: 24px;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
        }
        
        .filter-group {
            display: flex;
            gap: 12px;
            margin-bottom: 20px;
        }
        
        .filter-group .form-select {
            flex: 1;
        }
        
        .booking-item {
            border: 1px solid #e8e8e8;
            border-radius: 8px;
            padding: 16px;
            margin-bottom: 12px;
            transition: all 0.3s;
        }
        
        .booking-item:hover {
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
        }
        
        .booking-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 12px;
        }
        
        .booking-room {
            font-size: 16px;
            font-weight: 600;
            color: #262626;
        }
        
        .booking-status {
            padding: 4px 12px;
            border-radius: 12px;
            font-size: 12px;
        }
        
        .status-confirmed {
            background: #f6ffed;
            color: #52c41a;
        }
        
        .status-pending {
            background: #fffbe6;
            color: #faad14;
        }
        
        .booking-info {
            display: grid;
            gap: 8px;
            color: #595959;
            font-size: 14px;
        }
        
        .booking-info-item {
            display: flex;
            gap: 8px;
        }
        
        .booking-info-label {
            font-weight: 500;
            color: #8c8c8c;
            min-width: 70px;
        }
        
        .booking-actions {
            margin-top: 12px;
            padding-top: 12px;
            border-top: 1px solid #f0f0f0;
            display: flex;
            gap: 8px;
        }
        
        .btn-sm {
            padding: 4px 12px;
            font-size: 13px;
        }
        
        .btn-default {
            background: white;
            color: #262626;
            border: 1px solid #d9d9d9;
        }
        
        .btn-default:hover {
            color: #40a9ff;
            border-color: #40a9ff;
        }
        
        .btn-danger {
            background: white;
            color: #ff4d4f;
            border: 1px solid #ff4d4f;
        }
        
        .btn-danger:hover {
            background: #ff4d4f;
            color: white;
        }
        
        .empty-state {
            text-align: center;
            padding: 60px 20px;
            color: #8c8c8c;
        }
        
        .empty-icon {
            font-size: 64px;
            margin-bottom: 16px;
        }
        
        @media (max-width: 1024px) {
            .content-grid {
                grid-template-columns: 1fr;
            }
        }
    </style>
</head>
<body>
    <!-- 顶部导航 -->
    <div class="header">
        <div class="header-title">
            <span style="font-size: 24px;">📅</span>
            <h1>会议室预定系统</h1>
        </div>
        <div class="user-info">
            <span style="color: #8c8c8c;">欢迎，用户</span>
            <button class="btn-link" onclick="logout()">返回登录</button>
        </div>
    </div>
    
    <!-- 主内容 -->
    <div class="main-container">
        <div class="content-grid">
            <!-- 左侧：预定表单 -->
            <div class="booking-card">
                <h2 class="card-title">新建预定</h2>
                
                <div id="alertBox" style="display: none;"></div>
                
                <form id="bookingForm" onsubmit="handleSubmit(event)">
                    <div class="form-group">
                        <label class="form-label">
                            <span class="required">*</span>
                            会议室
                        </label>
                        <select class="form-select" id="roomSelect" required>
                            <option value="">请选择会议室</option>
                            <option value="1">会议室A（10人）</option>
                            <option value="2">会议室B（20人）</option>
                            <option value="3">301会议室（6人）</option>
                            <option value="4">董事会议室（15人）</option>
                        </select>
                    </div>
                    
                    <div class="form-group">
                        <label class="form-label">
                            <span class="required">*</span>
                            预定日期
                        </label>
                        <input 
                            type="date" 
                            class="form-input" 
                            id="bookingDate" 
                            required
                        >
                    </div>
                    
                    <div class="form-group">
                        <label class="form-label">
                            <span class="required">*</span>
                            时间段
                        </label>
                        <div class="time-group">
                            <input 
                                type="time" 
                                class="form-input" 
                                id="startTime" 
                                required
                            >
                            <input 
                                type="time" 
                                class="form-input" 
                                id="endTime" 
                                required
                            >
                        </div>
                    </div>
                    
                    <div class="form-group">
                        <label class="form-label">
                            <span class="required">*</span>
                            预定人
                        </label>
                        <input 
                            type="text" 
                            class="form-input" 
                            id="bookingPerson" 
                            placeholder="请输入预定人姓名"
                            required
                        >
                    </div>
                    
                    <div class="form-group">
                        <label class="form-label">
                            <span class="required">*</span>
                            会议内容
                        </label>
                        <textarea 
                            class="form-textarea" 
                            id="meetingContent" 
                            placeholder="请简要描述会议内容"
                            required
                        ></textarea>
                    </div>
                    
                    <button type="submit" class="btn btn-primary">
                        提交预定
                    </button>
                </form>
            </div>
            
            <!-- 右侧：预定列表 -->
            <div class="bookings-list">
                <h2 class="card-title">我的预定</h2>
                
                <div class="filter-group">
                    <select class="form-select" id="filterRoom" onchange="filterBookings()">
                        <option value="">所有会议室</option>
                        <option value="1">会议室A</option>
                        <option value="2">会议室B</option>
                        <option value="3">301会议室</option>
                        <option value="4">董事会议室</option>
                    </select>
                    
                    <select class="form-select" id="filterStatus" onchange="filterBookings()">
                        <option value="">所有状态</option>
                        <option value="confirmed">已确认</option>
                        <option value="pending">待确认</option>
                        <option value="cancelled">已取消</option>
                    </select>
                </div>
                
                <div id="bookingsList">
                    <!-- 示例预定 -->
                    <div class="booking-item">
                        <div class="booking-header">
                            <div class="booking-room">会议室A</div>
                            <span class="booking-status status-confirmed">已确认</span>
                        </div>
                        <div class="booking-info">
                            <div class="booking-info-item">
                                <span class="booking-info-label">预定时间：</span>
                                <span>2025-10-30  14:00 - 16:00</span>
                            </div>
                            <div class="booking-info-item">
                                <span class="booking-info-label">预定人：</span>
                                <span>张三</span>
                            </div>
                            <div class="booking-info-item">
                                <span class="booking-info-label">会议内容：</span>
                                <span>季度总结会议</span>
                            </div>
                        </div>
                        <div class="booking-actions">
                            <button class="btn btn-default btn-sm" onclick="editBooking(1)">
                                编辑
                            </button>
                            <button class="btn btn-danger btn-sm" onclick="cancelBooking(1)">
                                取消预定
                            </button>
                        </div>
                    </div>
                    
                    <div class="booking-item">
                        <div class="booking-header">
                            <div class="booking-room">301会议室</div>
                            <span class="booking-status status-pending">待确认</span>
                        </div>
                        <div class="booking-info">
                            <div class="booking-info-item">
                                <span class="booking-info-label">预定时间：</span>
                                <span>2025-10-31  09:00 - 11:00</span>
                            </div>
                            <div class="booking-info-item">
                                <span class="booking-info-label">预定人：</span>
                                <span>李四</span>
                            </div>
                            <div class="booking-info-item">
                                <span class="booking-info-label">会议内容：</span>
                                <span>项目启动会</span>
                            </div>
                        </div>
                        <div class="booking-actions">
                            <button class="btn btn-default btn-sm" onclick="editBooking(2)">
                                编辑
                            </button>
                            <button class="btn btn-danger btn-sm" onclick="cancelBooking(2)">
                                取消预定
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    <script>
        // 设置默认日期为今天
        document.getElementById('bookingDate').valueAsDate = new Date();
        
        // 表单提交处理
        function handleSubmit(event) {
            event.preventDefault();
            
            const formData = {
                room_id: document.getElementById('roomSelect').value,
                date: document.getElementById('bookingDate').value,
                start_time: document.getElementById('startTime').value,
                end_time: document.getElementById('endTime').value,
                booking_person: document.getElementById('bookingPerson').value,
                meeting_content: document.getElementById('meetingContent').value
            };
            
            // 验证时间段
            if (formData.start_time >= formData.end_time) {
                showAlert('结束时间必须晚于开始时间', 'error');
                return;
            }
            
            // 模拟时间冲突检测
            const isConflict = Math.random() > 0.7; // 30%概率模拟冲突
            
            if (isConflict) {
                showAlert('该时间段已被预定，请选择其他时间', 'error');
                return;
            }
            
            // 实际应用中这里应该调用API
            console.log('提交预定:', formData);
            showAlert('预定成功！', 'success');
            
            // 重置表单
            document.getElementById('bookingForm').reset();
            document.getElementById('bookingDate').valueAsDate = new Date();
        }
        
        // 显示提示信息
        function showAlert(message, type) {
            const alertBox = document.getElementById('alertBox');
            alertBox.className = `alert alert-${type}`;
            alertBox.textContent = message;
            alertBox.style.display = 'block';
            
            setTimeout(() => {
                alertBox.style.display = 'none';
            }, 5000);
        }
        
        // 筛选预定
        function filterBookings() {
            const roomFilter = document.getElementById('filterRoom').value;
            const statusFilter = document.getElementById('filterStatus').value;
            
            console.log('筛选条件:', { room: roomFilter, status: statusFilter });
            // 实际应用中这里应该调用API进行筛选
        }
        
        // 编辑预定
        function editBooking(id) {
            alert(`编辑预定 #${id}\n\n实际应用中会弹出编辑表单`);
        }
        
        // 取消预定
        function cancelBooking(id) {
            if (confirm('确定要取消这个预定吗？')) {
                alert(`取消预定 #${id}\n\n实际应用中会调用API取消预定`);
            }
        }
        
        // 退出登录
        function logout() {
            if (confirm('确定要返回登录页面吗？')) {
                // 实际应用中跳转到登录页
                alert('返回登录页面');
                // window.location.href = 'login.html';
            }
        }
    </script>
</body>
</html>
